import React, { Fragment, Component } from "react";
import {
  View,
  Text,
  StatusBar,
  Image,
  TouchableHighlight,
  StyleSheet
} from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
class My extends Component {
  constructor() {
    super();
    this.state = {};
  }
  rightView() {
    return (
      <View style={styles.rightViewStyle}>
        <Text
          style={{ fontSize: 14, marginTop: 3, marginRight: 10, color: "#777" }}
        >
          用户余额￥1.00
        </Text>
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  rightView1() {
    return (
      <View style={styles.rightViewStyle}>
        <Text
          style={{ fontSize: 14, marginTop: 3, marginRight: 10, color: "#777" }}
        >
          0
        </Text>
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  rightView2() {
    return (
      <View style={styles.rightViewStyle}>
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  rightView3() {
    return (
      <View style={styles.rightViewStyle}>
        <Image
          source={require("../../images/new.png")}
          style={{ width: 30, height: 30, marginRight: 10 }}
        />
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  rightView4() {
    return (
      <View style={styles.rightViewStyle}>
        <Text
          style={{ fontSize: 14, marginTop: 3, marginRight: 10, color: "#777" }}
        >
          轻松开店 招财进宝
        </Text>
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  rightView5() {
    return (
      <View style={styles.rightViewStyle}>
        <Text
          style={{ fontSize: 14, marginTop: 3, marginRight: 10, color: "#777" }}
        >
          查看全部订单
        </Text>
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  render() {
    return (
      <Fragment>
        <View style={{ backgroundColor: "#ddd", flex: 1 }}>
          <StatusBar backgroundColor="orange" barStyle="light-content" />
          <View style={styles.userInfoViewStyle}>
            <View style={styles.topViewStyle}>
              <View style={{ flexDirection: "row", alignItems: "center" }}>
                <Image
                  source={require("../../images/touxiang.jpg")}
                  style={{
                    width: 70,
                    height: 70,
                    borderRadius: 35,
                    marginLeft: 15,
                    marginTop: 10
                  }}
                />
                <Text style={{ marginLeft: 15, color: "#fff", fontSize: 16 }}>
                  昵称
                </Text>
              </View>
              <View>
                <Ionicons
                  name={"ios-arrow-forward"}
                  size={24}
                  style={{ marginRight: 15 }}
                />
              </View>
            </View>
            <View style={styles.bottomViewStyle}>
              <View
                style={{
                  flex: 1,
                  alignItems: "center",
                  borderRightColor: "#fff",
                  borderRightWidth: 1
                }}
              >
                <Text>100</Text>
                <Text>马哥券</Text>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: "center",
                  borderRightColor: "#fff",
                  borderRightWidth: 1
                }}
              >
                <Text>12</Text>
                <Text>评价</Text>
              </View>
              <View style={{ flex: 1, alignItems: "center" }}>
                <Text>50</Text>
                <Text>评价</Text>
              </View>
            </View>
          </View>
          <TouchableHighlight
            style={{ borderBottomColor: "#ddd", borderBottomWidth: 1 }}
          >
            <View style={styles.container}>
              <View style={styles.leftViewStyle}>
                <Image
                  source={require("../../images/STAR.png")}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    marginLeft: 10
                  }}
                />
                <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                  我的订单
                </Text>
              </View>
              <View>{this.rightView5()}</View>
            </View>
          </TouchableHighlight>
          <View
            style={{
              flexDirection: "row",
              backgroundColor: "white",
              height: 80,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <TouchableHighlight
              style={{
                flex: 1,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <View style={{ alignItems: "center" }}>
                <Image
                  source={require("../../images/card.png")}
                  style={{ width: 30, height: 30 }}
                />
                <Text style={{ marginTop: 5 }}>待付款</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight style={{ flex: 1, alignItems: "center" }}>
              <View style={{ alignItems: "center" }}>
                <Image
                  source={require("../../images/kaquan.png")}
                  style={{ width: 30, height: 30 }}
                />
                <Text style={{ marginTop: 5 }}>待使用</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight style={{ flex: 1, alignItems: "center" }}>
              <View style={{ alignItems: "center" }}>
                <Image
                  style={{ width: 30, height: 30 }}
                  source={require("../../images/comment.png")}
                />
                <Text style={{ marginTop: 5 }}>待评价</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight style={{ flex: 1, alignItems: "center" }}>
              <View style={{ alignItems: "center" }}>
                <Image
                  style={{ width: 30, height: 30 }}
                  source={require("../../images/tuikuan.png")}
                />
                <Text style={{ marginTop: 5 }}>退款/售后</Text>
              </View>
            </TouchableHighlight>
          </View>
          <TouchableHighlight
            style={{
              borderBottomColor: "#ddd",
              borderBottomWidth: 1,
              marginTop: 15
            }}
          >
            <View style={styles.container}>
              <View style={styles.leftViewStyle}>
                <Image
                  source={require("../../images/qianbao.png")}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    marginLeft: 10
                  }}
                />
                <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                  钱包
                </Text>
              </View>
              <View>{this.rightView()}</View>
            </View>
          </TouchableHighlight>
          <TouchableHighlight>
            <View style={styles.container}>
              <View style={styles.leftViewStyle}>
                <Image
                  source={require("../../images/zan.png")}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    marginLeft: 10
                  }}
                />
                <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                  抵用券
                </Text>
              </View>
              <View>{this.rightView1()}</View>
            </View>
          </TouchableHighlight>
          <TouchableHighlight style={{ marginTop: 10 }}>
            <View style={styles.container}>
              <View style={styles.leftViewStyle}>
                <Image
                  source={require("../../images/menu.png")}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    marginLeft: 10
                  }}
                />
                <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                  积分商城
                </Text>
              </View>
              <View>{this.rightView2()}</View>
            </View>
          </TouchableHighlight>
          <TouchableHighlight style={{ marginTop: 10 }}>
            <View style={styles.container}>
              <View style={styles.leftViewStyle}>
                <Image
                  source={require("../../images/tuijian.png")}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    marginLeft: 10
                  }}
                />
                <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                  今日推荐
                </Text>
              </View>
              <View>{this.rightView3()}</View>
            </View>
          </TouchableHighlight>
          <TouchableHighlight style={{ marginTop: 10 }}>
            <View style={styles.container}>
              <View style={styles.leftViewStyle}>
                <Image
                  source={require("../../images/hezuo.png")}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    marginLeft: 10
                  }}
                />
                <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                  我要合作
                </Text>
              </View>
              <View>{this.rightView4()}</View>
            </View>
          </TouchableHighlight>
        </View>
      </Fragment>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "white",
    height: 50
  },
  userInfoViewStyle: {
    height: 180,
    backgroundColor: "orange"
  },
  leftViewStyle: {
    flexDirection: "row",
    justifyContent: "center"
  },
  rightViewStyle: {
    flexDirection: "row",
    justifyContent: "center"
  },
  topViewStyle: {
    height: 120,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  bottomViewStyle: {
    height: 60,
    backgroundColor: "rgba(0,0,0,0.1)",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  }
});
export default My;
